<template>
	<view class="dbxq-layout">
		<!-- 调拨信息 -->
		<view class="dbxq-info-card">
			<view class="dbxq-info-card-cell">
				<text>{{jsonData.allotType == '1' ? '划拨' : '回拨'}}单号</text>
				<text>100000132</text>
			</view>
			<view class="dbxq-info-card-cell">
				<text>时间</text>
				<text>{{jsonData.allotTime}}</text>
			</view>
			<view class="dbxq-info-card-cell">
				<text>类型</text>
				<text>{{jsonData.allotType == '1' ? '划拨' : '回拨'}}</text>
			</view>
			<view class="dbxq-info-card-cell">
				<text>政策</text>
				<text>{{jsonData.brandName}}-{{jsonData.produceName}}-{{jsonData.policyName}}</text>
			</view>
			<view class="dbxq-info-card-cell">
				<text>数量</text>
				<text>{{jsonData.allotNum}}台</text>
			</view>
			<view class="dbxq-info-card-cell">
				<text>金额</text>
				<text>¥{{jsonData.allotAmount}}</text>
			</view>
			<view class="dbxq-info-card-cell">
				<text>{{jsonData.allotType == '1' ? '划拨给' : '回拨来源'}}</text>
				<text>{{jsonData.inAgentName}}（{{jsonData.inAgentId}}）</text>
			</view>
		</view>
		<!-- 机具列表 -->
		<view class="device-list">
			<view class="device-list-title">机具列表</view>
			<view class="table">
				<view class="table-row">
					<text class="table-cell">机具编号</text>
					<text class="table-cell">型号</text>
					<text class="table-cell">网络</text>
					<text class="table-cell">厂商</text>
				</view>
				<view class="table-row" v-for="(item,index) in dataList" :key="index">
					<text class="table-cell">{{item.ksnNo}}</text>
					<text class="table-cell">{{item.deviceTypeCode}}</text>
					<text class="table-cell">{{item.deviceNetworkType}}</text>
					<text class="table-cell">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getTransferListDetail } from '@/common/api/api.js'
	
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data || '{}'))
	console.log(jsonData)
	const dataList = ref([])
	const queryList = async () => {
		const res = await getTransferListDetail({ allotBatch: jsonData.id })
		dataList.value = res.result
	}
	onLoad(() => {
		queryList()
	})
</script>

<style lang="scss" scoped>
	.dbxq-layout {
		padding: 30rpx;

		.dbxq-info-card {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;

			.dbxq-info-card-cell {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-size: 26rpx;
				text:nth-child(1){
					flex-shrink: 0;
					margin-right: 50rpx;
				}
				text:nth-child(2){
					text-align: right;
				}
				&:nth-child(n + 2) {
					margin-top: 16rpx;
				}
			}
		}

		.device-list {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;

			.table {
				display: table;
				width: 100%;
				/* 单元格边框合并 */
				border-collapse: collapse;
				margin-top: 20rpx;

				.table-row {
					display: table-row;

					.table-cell {
						display: table-cell;
						border: 1px solid #eee;
						/* 单元格边框 */
						padding: 20rpx 10rpx;
						/* 单元格内边距 */
						text-align: center;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
	}
</style>